<template>
  <div class="app-manage-view">
    <div class="app-manage-top">
      <el-button-group class="button-group">
        <el-button type="primary" @click="addApp">添加</el-button>
      </el-button-group>
      <div class="top-seach">
        <el-input placeholder="请输入内容" v-model="appSeach" class="input-with-select">
          <el-button slot="append" @click="findApp">查询</el-button>
        </el-input>
      </div>
    </div>
    <div class="app-manage-table"
         v-loading="isLoading"
         element-loading-text="数据加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(21, 29, 54, 0.8)"
    >
      <el-table
        ref="appTable"
        :data="data"
        height="100%"
        border
        highlight-current-row
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="index"
          label="序号"
          width="80"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="name"
          label="应用名称"
          width="200"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="registeredredirecturis"
          label="应用路径"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="grantTypeName"
          label="授权类型"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="buildType"
          label="自建类型"
          width="120"
        >
          <template slot-scope="scope">
            {{scope.row.buildType | filterBuildType}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="type"
          label="应用类型"
          width="120"
        >
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="editApp(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="appDel(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="app-manage-paging">
      <el-pagination
        layout="total, sizes, prev, pager, next"
        background
        :page-size="pageSize"
        :total="total"
        :page-count="10"
        :page-sizes="[5, 10, 20, 40]"
        :current-page="currentPage"
        @current-change="changePage"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog title="添加应用" :visible="addAppdialog" width="30%" @close="addClose" :close-on-click-modal="false">
      <el-form label-width="120px" status-icon :model="formLabelAlign" ref="addAppform" :rules="addApprules"
               class="demo-ruleForm">
        <el-form-item label="应用名称" prop="appName">
          <el-input v-model="formLabelAlign.appName" placeholder="请输入应用名称"></el-input>
        </el-form-item>
        <el-form-item label="clientID">
          <el-input v-model="formLabelAlign.clientID" placeholder="系统自动生成" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="clientSecred">
          <el-input v-model="formLabelAlign.clientSecred" placeholder="系统自动生成" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="redirectUris" prop="redirectUris">
          <el-input v-model="formLabelAlign.redirectUris" placeholder="重定向的url"></el-input>
        </el-form-item>
        <!--<el-form-item label="服务名称">-->
        <!--<el-input v-model="formLabelAlign.serviceName" placeholder="服务名称"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="应用介绍">-->
          <!--<el-input v-model="formLabelAlign.brief" placeholder="应用介绍"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="自建类型" prop="buildType">
          <el-select v-model="formLabelAlign.buildType" placeholder="是否自建">
            <el-option
              v-for="item in buildTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用类型" prop="type">
          <el-select v-model="formLabelAlign.type" placeholder="应用类型">
            <el-option
              v-for="item in typeList"
              :key="item.datavalue"
              :label="item.datacode"
              :value="item.datavalue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授权类型" prop="grantType">
          <el-select
            v-model="formLabelAlign.grantType"
            multiple
            filterable
            allow-create
            placeholder="请选择授权类型">
            <el-option
              v-for="item in grantTypeList"
              :key="item.datavalue"
              :label="item.datacode"
              :value="item.datavalue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用图片">
          <el-upload
            class="avatar-uploader"
            action="http://base.kingborn.org:27002/citydew-filesystem/upload"
            :data="upFileData"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            ref="upload"
          >
            <img v-if="formLabelAlign.imageUrl" :src="formLabelAlign.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCancel">取消</el-button>
        <el-button type="warning" @click="addKeep">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑应用" :visible="editAppdialog" width="30%" @close="editClose" :close-on-click-modal="false">
      <el-form label-width="120px" status-icon :model="formLabelAlign" ref="editAppform" :rules="addApprules"
               class="demo-ruleForm">
        <el-form-item label="应用名称" prop="appName">
          <el-input v-model="formLabelAlign.appName" placeholder="请输入应用名称"></el-input>
        </el-form-item>
        <el-form-item label="clientID">
          <el-input v-model="formLabelAlign.clientID" placeholder="系统自动生成" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="clientSecred">
          <el-input v-model="formLabelAlign.clientSecred" placeholder="系统自动生成" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="redirectUris" prop="redirectUris">
          <el-input v-model="formLabelAlign.redirectUris" placeholder="重定向的url"></el-input>
        </el-form-item>
        <!--<el-form-item label="服务名称">-->
        <!--<el-input v-model="formLabelAlign.serviceName" placeholder="服务名称"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="应用介绍">-->
          <!--<el-input v-model="formLabelAlign.brief" placeholder="应用介绍"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="自建类型" prop="buildType">
          <el-select v-model="formLabelAlign.buildType" placeholder="是否自建">
            <el-option
              v-for="item in buildTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用类型" prop="type">
          <el-select v-model="formLabelAlign.type" placeholder="应用类型">
            <el-option
              v-for="item in typeList"
              :key="item.datavalue"
              :label="item.datacode"
              :value="item.datavalue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授权类型" prop="grantType">
          <el-select
            v-model="formLabelAlign.grantType"
            multiple
            filterable
            allow-create
            placeholder="请选择授权类型">
            <el-option
              v-for="item in grantTypeList"
              :key="item.datavalue"
              :label="item.datacode"
              :value="item.datavalue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用图片">
          <el-upload
            class="avatar-uploader"
            action="http://base.kingborn.org:27002/citydew-filesystem/upload"
            :data="upFileData"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            ref="upload"
          >
            <img v-if="formLabelAlign.imageUrl" :src="formLabelAlign.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editCancel">取消</el-button>
        <el-button type="warning" @click="editKeep">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {localUitl} from '@/utils/localUitl';

  export default {

    components: {
      // name
    },
    name: "appManageView",
    props: {
      // 弹窗状态
      isLoading: {
        type: Boolean,
        default: false
      },
      // 总条数
      total: {
        type: Number,
        default: 0
      },
      // 每页条数
      pageSize: {
        type: Number,
        default: 10
      },
      // 应用列表
      data: {
        type: Array,
        default: []
      },
      // 添加应用表单
      formLabelAlign: {
        type: Object,
        default: {}
      },
      // 当前页
      currentPage: {
        type: Number,
        default: 1
      },
      // 应用类型列表
      typeList: {
        type: Array,
        default: []
      },
      // 授权类型列表
      grantTypeList: {
        type: Array,
        default: []
      },
      // add弹窗的状态
      addAppdialog: {
        type: Boolean,
        default: false
      },
      // edit弹窗的状态
      editAppdialog: {
        type: Boolean,
        default: false
      }
      // msg: String //  [name: typeof]
    },
    filters: {
      filterBuildType(value) {
        let buildTypeObj = {
          "0": "前后端分离",
          "1": "自行建站",
          "2": "前后端不分离"
        };
        return buildTypeObj[value];
      }
    },
    computed: {},
    watch: {},
    data() {
      let nameRules = (rule, value, callback) => {
        let reg = /^[^\d.\-\[\]{}+=_;:'"<>?/\\，,。、‘’“”；：【】|——]/;
        // let reg = /^[^\d.\-\[\]{}+=_;:'"<>?/\\，,。、‘’“”；：【】|——]+\d$/;
        if (!value) {
          return callback(new Error('应用名不能为空'));
        } else if (!reg.test(value)) {
          return callback(new Error('应用名不能以特殊字符和数字开头'));
        } else {
          callback();
        }
      };


      let redirectUrisRules = (rule, value, callback) => {
        let reg = /^(http|https):\/\//;
        if (!value) {
          return callback(new Error('定向路径不能为空'));
        } else if (!reg.test(value)) {
          return callback(new Error('请输入正确的url,必须以http或https开头'));
        } else {
          callback();
        }
      };


      return {
        appSeach: '', // 搜索应用框
        buildTypeList: [
          {
            value: '0',
            label: '前后端分离'
          }, {
            value: '1',
            label: '自行建站'
          }, {
            value: '2',
            label: '前后端不分离'
          }
        ], // 自建类型
        upFileData: { // 图片上传格式
          access_token: localUitl.getToken(),
          userId: localUitl.getToken(),
          suolue: "50*50",
          clienntId: "5b5eb97cc600261d000c25fc"
        },
        addApprules: {
          appName: [
            {required: true, validator: nameRules, trigger: 'blur'},
            {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
          ],
          redirectUris: [
            {required: true, validator: redirectUrisRules, trigger: 'blur'}
          ],
          serviceName: [
            {required: true, message: '请输入服务名称', trigger: 'blur'}
          ],
          buildType: [
            {required: true, message: '请选择自建类型', trigger: 'change'}
          ],
          type: [
            {required: true, message: '请选择应用类型', trigger: 'change'}
          ],
          grantType: [
            {required: true, message: '请选择授权类型', trigger: 'change'}
          ]
        }
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      // 改变当前页的回调
      changePage(page) {
        this.$emit('changePage', page);
      },
      // 改变每页条数的回调
      sizeChange(num) {
        this.$emit('sizeChange', num);
      },
      // 关闭添加应用弹窗的回调
      addClose() {
        this.$emit('addClose');
      },
      // 点击添加
      addApp() {
        this.$emit('addApp');
      },
      // 取消添加
      addCancel() {
        this.$emit('addCancel');
      },
      // 保存添加
      addKeep() {
        this.$emit('addKeep');
      },
      // 关闭编辑应用弹窗的回调
      editClose() {
        this.$emit('editClose');
      },
      // 点击编辑
      editApp(index, row) {
        this.$emit('editApp', index, row);
      },
      // 保存编辑
      editKeep() {
        this.$emit('editKeep');
      },
      // 取消编辑
      editCancel() {
        this.$emit('editCancel');
      },
      // 删除应用
      appDel(index, row) {
        this.$emit('appDel', index, row);
      },
      // 搜索应用
      findApp() {
        this.$emit('findApp', this.appSeach);
      },
      // 上传文件
      handleAvatarSuccess(res, file) {
        this.$emit('handleAvatarSuccess', res);
      }
    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">
  @import url("./appManage");
</style>
